<script setup>
import { ref, reactive, watch } from "vue";
import slPickup from "./components/pickup.vue";
import slDelivery from "./components/delivery.vue";
import slComplete from "./components/complete.vue";

/* 标签页索引 */
const tabIndex = ref(0);

/*作业状态 1为待提货、2为在途(在途和已交付)、6为已完成(已回车登记)*/
const status = ref(1);

const tabMetas = reactive([
  { title: "待提货", rendered: true },
  { title: "在途", rendered: false },
  { title: "已完成", rendered: false },
]);

/* 切换 Tab 标签页 */
const onTabChange = (index) => {
  tabMetas[index].rendered = true;
  tabIndex.value = index;
};


/*监听tabIndex的变化修改status的值为不同的作业状态*/
watch(tabIndex, (newValue) => {
  if (newValue === 0) {
    status.value = 1;
  } else if (newValue === 1) {
    status.value = 2;
  } else {
    status.value = 6;
  }
}, { immediate: true });

</script>

<template>
  <view class="page-container">
    <view class="task-tabbar">
      <text v-for="(tabMeta, index) in tabMetas" :key="tabMeta.title" @click="onTabChange(index)" :class="{ active: tabIndex === index }" class="tab">{{ tabMeta.title }}</text>
    </view>
    <view v-if="tabMetas[0].rendered" v-show="tabIndex === 0" class="task-list">
      <sl-pickup :status="status"></sl-pickup>
    </view>
    <view v-if="tabMetas[1].rendered" v-show="tabIndex === 1" class="task-list">
      <sl-delivery :status="status"></sl-delivery>
    </view>
    <view v-if="tabMetas[2].rendered" v-show="tabIndex === 2" class="task-list">
      <sl-complete :status="status"></sl-complete>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
